<template>
  <view>
    <view class="container">
      <image src="../../static/imgs/Frame 13.png" mode=""></image>
      <view class="title">
        <u-icon name="arrow-left" color="black" size="30" @click='Fhuidnlinfg()'></u-icon>
        <text class="title_name">待付款</text>
      </view>
    </view>

    <!--搜索  -->

    <view class="splendid_search">
      <!-- <u-search :show-action='false' @focus='goSearch()'></u-search> -->
      <view class="search" @click='goSearch()'>
        <u-icon name="search" size="30"></u-icon>
        <view class="tt">
          请输入关键词
        </view>
      </view>

      <!-- <view class="sort">
        <view :class="flag ? 'active' : ''" @click="flag=true">活动订单
          <image v-if="flag" class="line1" src="../../static/imgs/Ellipse143.png" mode=""></image>
        </view>
        <view :class="flag ? '' : 'active'" @click="flag=false">赛事订单
          <image v-if="flag==false" class="line1" src="../../static/imgs/Ellipse143.png" mode=""></image>
        </view>
      </view> -->
    </view>

    <view class="line"></view>
    <!--  -->
    <view class="content" v-for="item in 6">
      <view class="dfk">等待买家付款</view>
      <view class="content_center">
        <image src="../../static/imgs/Rectangle 548.png" mode=""></image>
        <view class="">
          <view class="title">长清大学生红叶谷汉服真人秀开团汉服真人秀开</view>
          <view class="item">项目内容：提供汉服一套、写真一组、提供汉服一套、写真一组、提供汉服一套、写真一组</view>
          <view class="number">人数：3人</view>
          <view class="price">
            <text class="price1">需付款 </text>
            <text class="price2">829.9 </text>
          </view>
        </view>
      </view>
      <view class="sytime">订单即将关闭，请及时付款 剩余时间5:00</view>

      <view class="buttons">
        <button class="button1">取消订单</button>
        <button class="button2" @click="godetails()">继续付款</button>
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        keyword: '', // 搜索框输入
        flag: true, // 切换
        rightList: []
      };
    },
    methods: {
      goSearch() {
        uni.navigateTo({
          url: '/pages/search/search'
        })
      },
      godetails() {
        uni.navigateTo({
          url: '/pages/order_details/order_details'
        })
      },
      Fhuidnlinfg() {
        uni.navigateBack({
          delta: 1
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .u-icon-wrap {
    padding-left: 30rpx;
  }

  .container {
    position: relative;
    width: 750rpx;
    height: 278rpx;

    >image {
      width: 100%;
      height: 100%;
    }

    .title {
      position: absolute;
      top: 116rpx;
      left: 32rpx;
      font-weight: bold;
      color: #333333;

      .title_name {
        font-size: 32rpx;
        margin-left: 265rpx;
      }
    }
  }

  .search {
    // width: 622rpx;
    height: 62rpx;
    background: #F2F2F2;
    border-radius: 74rpx 74rpx 74rpx 74rpx;
    display: flex;
    align-items: center;
    color: #949494;
    font-size: 24rpx;
    padding-left: 20rpx;
    padding-left: 40rpx;

    .tt {
      margin-left: 10rpx;
    }
  }

  // 搜索
  .splendid_search {
    margin: 35rpx 32rpx;
    // padding-top: 32rpx;
    position: absolute;
    top: 156rpx;
    width: 686rpx;
    // height: 202rpx;
    // background: #FFFFFF;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(102, 102, 102, 0.1);
    border-radius: 20rpx 20rpx 20rpx 20rpx;

    .sort {

      margin-top: 35rpx;
      display: flex;
      justify-content: space-around;
      font-size: 28rpx;

      .active {
        font-size: 28rpx;
        font-weight: bold;
        color: #FAD74E;
        position: relative;
        display: inline-block;

        .line1 {
          position: absolute;
          left: 35%;
          bottom: -15rpx;
          width: 38rpx;
          height: 8rpx;
        }
      }
    }
  }

  .line {
    margin-top: 50rpx;
  }

  .content {
    margin-top: 20rpx;
    margin-left: 32rpx;
    padding: 25rpx 32rpx;
    width: 686rpx;
    height: 408rpx;
    background: #FFFFFF;
    border-radius: 20rpx 20rpx 20rpx 20rpx;




    .dfk {
      text-align: right;
      color: #F19250;
      font-size: 24rpx;
      font-weight: bold;
    }

    .content_center {
      display: flex;
      margin-top: 16rpx;


      >image {
        margin-right: 20rpx;
        width: 160rpx;
        height: 160rpx;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
      }

      .title {
        width: 432rpx;
        margin: 0rpx 0 10rpx;
        font-size: 24rpx;
        font-weight: bold;
        color: #333333;

        white-space: nowrap;
        /* 防止文字换行 */
        overflow: hidden;
        /* 文字超出部分隐藏 */
        text-overflow: ellipsis;
        /* 使用省略号代替超出的文本 */
      }

      .item {
        width: 430rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #666666;

        display: -webkit-box;
        -webkit-line-clamp: 2;
        /* 显示的行数 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .number {
        width: 432rpx;
        margin-top: 10rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #666666;
      }

      .price {
        text-align: right;
        color: #C81A1A;
        font-weight: 700;

        .price1 {
          margin-right: 8rpx;
          color: #000000;
          font-size: 24rpx;
        }

        .price2 {}


      }

    }

    .sytime {
      margin-top: 15rpx;
      padding: 0 32rpx;
      width: 622rpx;
      height: 48rpx;
      line-height: 48rpx;
      background: #FFF8F2;
      border-radius: 4rpx 4rpx 4rpx 4rpx;

      font-size: 24rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #F19250;
    }

    .buttons {
      width: 100%;
      margin-top: 20rpx;
      text-align: right;



      >button {
        display: inline-block;
        width: 158rpx;
        height: 48rpx;
        line-height: 47rpx;
        border-radius: 60rpx 60rpx 60rpx 60rpx;
        font-size: 24rpx;
        // font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;

      }

      .button1 {
        margin-right: 16rpx;
        color: #666666;
        background: #F3F3F3;

        &:after {
          border: none;
        }
      }

      .button2 {
        color: #FF6F04;
        background: #fff;
        border: 1rpx solid #FF6F04;
      }
    }
  }
</style>